<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
  <title>ArcGIS Graphics Demo</title>

  <link rel="stylesheet" href="https://js.arcgis.com/4.26/esri/themes/light/main.css" />
  <script src="https://js.arcgis.com/4.26/"></script>

  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>

  <script>
    require([
      "esri/Map",
      "esri/views/MapView",
      "esri/layers/GraphicsLayer",
      "esri/Graphic",
      "esri/geometry/Point",
      "esri/geometry/Polyline",
      "esri/geometry/Polygon"
    ], function(Map, MapView, GraphicsLayer, Graphic, Point, Polyline, Polygon) {
      
      // 创建地图
      const map = new Map({
        basemap: "topo-vector"
      });

      // 创建视图
      const view = new MapView({
        container: "viewDiv",
        map: map,
        center: [116.4, 39.9], // 北京
        zoom: 11,
        // 配置默认的弹出窗口样式
        popup: {
          alignment: "bottom-left",  // 设置弹出窗口在点击位置的左下方
          collapseEnabled: false,    // 禁用折叠按钮
          dockEnabled: false,        // 禁用停靠
          actions: [],               // 移除默认操作按钮
          defaultPopupTemplateEnabled: true
        }
      });

      // 自定义弹出窗口的样式
      view.popup.viewModel.includeDefaultActions = false;  // 移除默认操作
      
      // 添加自定义样式
      const style = document.createElement('style');
      style.textContent = `
        .esri-popup__header {
          background-color: #ffffff;
        }
        .esri-popup__content {
          margin: 0;
          padding: 12px;
        }
        .esri-popup__footer {
          display: none;
        }
      `;
      document.head.appendChild(style);

      // 创建图层
      const graphicsLayer = new GraphicsLayer();
      map.add(graphicsLayer);

      // 添加点
      const point = new Point({
        longitude: 116.4,
        latitude: 39.9,
        spatialReference: view.spatialReference
      });

      const pointGraphic = new Graphic({
        geometry: point,
        symbol: {
          type: "picture-marker",
          url: "https://static.arcgis.com/images/Symbols/Shapes/BluePin1LargeB.png",
          width: "26px",
          height: "26px",
          angle: 0,
          xoffset: 0,
          yoffset: 12  // 调整图片锚点位置
        },
        attributes: {
          title: "北京市",
          type: "城市",
          population: "2170万",
          area: "16410平方公里"
        },
        popupTemplate: {
          title: "{title}",
          content: [
            {
              type: "fields",
              fieldInfos: [
                {
                  fieldName: "type",
                  label: "类型"
                },
                {
                  fieldName: "population",
                  label: "人口"
                },
                {
                  fieldName: "area",
                  label: "面积"
                }
              ]
            }
          ]
        }
      });

      // 添加点的文字标注
      const pointText = new Graphic({
        geometry: point,
        symbol: {
          type: "text",
          color: "black",
          haloColor: "white",
          haloSize: "2px",
          text: "北京市",
          xoffset: 0,
          yoffset: -20,
          font: {
            size: 12,
            family: "sans-serif"
          }
        }
      });

      // 添加线
      const line = new Polyline({
        paths: [
          [116.3, 39.9],
          [116.4, 39.95],
          [116.5, 39.9]
        ],
        spatialReference: view.spatialReference
      });

      const lineGraphic = new Graphic({
        geometry: line,
        symbol: {
          type: "simple-line",
          color: [0, 0, 255],
          width: 2
        },
        // 添加线的属性信息
        attributes: {
          title: "示例线段",
          type: "道路",
          length: "10公里",
          status: "在建"
        },
        // 配置线的弹出窗口
        popupTemplate: {
          title: "{title}",
          content: [
            {
              type: "fields",
              fieldInfos: [
                {
                  fieldName: "type",
                  label: "类型"
                },
                {
                  fieldName: "length",
                  label: "长度"
                },
                {
                  fieldName: "status",
                  label: "状态"
                }
              ]
            }
          ]
        }
      });

      // 添加线的文字标注（在线的中点）
      const lineMidPoint = new Point({
        longitude: 116.4,
        latitude: 39.95,
        spatialReference: view.spatialReference
      });
      
      const lineText = new Graphic({
        geometry: lineMidPoint,
        symbol: {
          type: "text",
          color: "black",
          haloColor: "white",
          haloSize: "2px",
          text: "示例线段",
          font: {
            size: 12,
            family: "sans-serif"
          }
        }
      });

      // 添加线的端点标记
      const lineStartPoint = new Graphic({
        geometry: new Point({
          longitude: 116.3,
          latitude: 39.9,
          spatialReference: view.spatialReference
        }),
        symbol: {
          type: "picture-marker",
          url: "https://arcgis.github.io/arcgis-samples-javascript/sample-data/layers-ogcfeaturelayer/windmill.png",
          width: "20px",
          height: "20px",
          angle: 0,
          xoffset: 0,
          yoffset: 10
        }
      });

      const lineEndPoint = new Graphic({
        geometry: new Point({
          longitude: 116.5,
          latitude: 39.9,
          spatialReference: view.spatialReference
        }),
        symbol: {
          type: "picture-marker",
          url: "https://static.arcgis.com/images/Symbols/Basic/RedStickpin.png",
          width: "20px",
          height: "20px",
          angle: 0,
          xoffset: 0,
          yoffset: 10
        }
      });

      // 添加面
      const polygon = new Polygon({
        rings: [[
          [116.3, 39.8],
          [116.5, 39.8],
          [116.5, 39.85],
          [116.3, 39.85],
          [116.3, 39.8]
        ]],
        spatialReference: view.spatialReference
      });

      const polygonGraphic = new Graphic({
        geometry: polygon,
        symbol: {
          type: "simple-fill",
          color: [51, 51, 204, 0.2],
          outline: {
            color: [51, 51, 204],
            width: 1
          }
        },
        // 添加面的属性信息
        attributes: {
          title: "示例区域",
          type: "规划区",
          area: "500公顷",
          usage: "商业用地",
          status: "已批准"
        },
        // 配置面的弹出窗口
        popupTemplate: {
          title: "{title}",
          content: [
            {
              type: "fields",
              fieldInfos: [
                {
                  fieldName: "type",
                  label: "类型"
                },
                {
                  fieldName: "area",
                  label: "面积"
                },
                {
                  fieldName: "usage",
                  label: "用途"
                },
                {
                  fieldName: "status",
                  label: "状态"
                }
              ]
            }
          ]
        }
      });

      // 添加面的文字标注（在面的中心点）
      const polygonCenter = polygon.centroid;
      const polygonText = new Graphic({
        geometry: polygonCenter,
        symbol: {
          type: "text",
          color: "black",
          haloColor: "white",
          haloSize: "2px",
          text: "示例区域",
          font: {
            size: 12,
            family: "sans-serif"
          }
        }
      });

      // 添加面的中心标记
      const polygonCenterMarker = new Graphic({
        geometry: polygonCenter,
        symbol: {
          type: "picture-marker",
          url: "https://static.arcgis.com/images/Symbols/Basic/GreenStickpin.png",
          width: "24px",
          height: "24px",
          angle: 0,
          xoffset: 0,
          yoffset: 12
        }
      });

      // 添加所有图形到图层
      graphicsLayer.addMany([
        pointGraphic,
        pointText,
        lineStartPoint,
        lineEndPoint,
        lineGraphic,
        lineText,
        polygonGraphic,
        polygonCenterMarker,
        polygonText
      ]);

      // 添加点击事件监听
      view.on("click", function(event) {
        view.hitTest(event).then(function(response) {
          const graphic = response.results[0]?.graphic;
          if (graphic) {

          }
        });
      });
    });
  </script>
</head>

<body>
  <div id="viewDiv"></div>
</body>
</html> 